<template>
  <q-page>
    <q-form class="column items-center justify-center q-mt-lg">
      <q-item class="column q-pa-lg">
        <div class="text-h5">
          {{ 'Профиль' }}
        </div>
        <q-input v-model="userForm.full_name"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 300px"
                 label="Имя" />
        <q-input v-model="userForm.email"
                 :rules="[val => !!val || 'Поле Email обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 300px; border-radius: 4px"
                 type="login"
                 label="Email"/>
        <q-input v-model="userForm.password"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 300px; border-radius: 4px"
                 type="password"
                 label="Старый пароль"/>
        <q-input v-model="userForm.new_password"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 300px; border-radius: 4px"
                 label="Новый пароль"/>
        <q-btn class="q-mt-md"
               color="primary"
               style="width: 300px; border-radius: 4px"
               @click="updateSelf">
          {{ 'Сохранить' }}
        </q-btn>
      </q-item>
    </q-form>
  </q-page>
</template>

<script setup>
import {defineComponent, onMounted, reactive, ref} from "vue";
import {authStore} from "stores/auth-store";
import {useRouter} from "vue-router";

defineComponent({
  name: 'MyProfilePage'
});

const auth = authStore()
const router = useRouter()
const isLoading = ref(false)

onMounted(() => {
  if (!auth.user) {
    console.log(auth.user)
    auth.getUserSelf()
  }
})

const userForm = reactive({
  full_name: auth.user?.full_name,
  email: auth.user?.email,
  password: '',
  new_password: ''
})

const updateSelf = async () => {
  if (isLoading.value) {
    return
  }
  isLoading.value = true
  try {
    await auth.updateUserSelf(userForm)
  } catch (err) {
    console.error(err)
  } finally {
    isLoading.value = false
  }
}

</script>

<style lang="scss" scoped>

</style>
